---
type: integration
title: '@astrojs/vercel'
description: Aprende como usar el adaptador SSR @astrojs/vercel para desplegar tu proyecto de Astro.
githubIntegrationURL: 'https://github.com/withastro/astro/tree/main/packages/integrations/vercel/'
category: adapter
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Since from '~/components/Since.astro';
import ReadMore from '~/components/ReadMore.astro'

Este adaptador permite a Astro desplegar tu [sitio renderizado en modo `hybrid` o `server`](/es/basics/rendering-modes/#renderizado-bajo-demanda) a [Vercel](https://www.vercel.com/).

Si utilizas Astro como un [generador de sitios estáticos](/es/basics/rendering-modes/#pre-renderizado), sólo necesitarás este adaptador si utilizas servicios adicionales de Vercel (por ejemplo, [Vercel Web Analytics](https://vercel.com/docs/analytics), [Vercel Image Optimization](https://vercel.com/docs/image-optimization)). De lo contrario, no necesita un adaptador para desplegar su sitio `static`.

Aprende a desplegar tu sitio de Astro consultando nuestra [guía de despliegue en Vercel](/es/guides/deploy/vercel/).

## ¿Por qué Astro Vercel?

[Vercel](https://www.vercel.com/) es una plataforma de despliegue que te permite alojar tu proyecto conectándote directamente a tu repositorio de GitHub. Este adaptador ajusta el proceso de compilación de Astro para preparar tu proyecto para el despliegue a través de Vercel.

## Instalación

Astro incluye el comando `astro add` para automatizar la instalación de integraciones oficiales. Si lo prefieres, puedes [instalar las integraciones manualmente](#instalación-manual).

Agrega el adaptador Vercel para habilitar SSR en tu proyecto de Astro con el siguiente comando `astro add`. Esto instalará `@astrojs/vercel` y hará los cambios apropiados en tu archivo `astro.config.mjs` en un solo paso.

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npx astro add vercel
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm astro add vercel
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn astro add vercel
    ```
  </Fragment>
</PackageManagerTabs>

### Instalación manual

En primer lugar, añade el adaptador `@astrojs/vercel` a las dependencias de tu proyecto utilizando tu gestor de paquetes preferido:

<PackageManagerTabs>
  <Fragment slot="npm">
    ```sh
    npm install @astrojs/vercel
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```sh
    pnpm add @astrojs/vercel
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```sh
    yarn add @astrojs/vercel
    ```
  </Fragment>
</PackageManagerTabs>

A continuación, añade el adaptador y el [modo de renderizado bajo demanda](/es/basics/rendering-modes/#renderizado-bajo-demanda) que deseas a tu archivo `astro.config.*`:

```js title="astro.config.mjs" ins={2, 6-7}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel(),
});
```

### Objetivos

Puedes desplegar en diferentes objetivos:

* `serverless`: SSR dentro de una [función Node.js](https://vercel.com/docs/concepts/functions/serverless-functions).
* `static`: genera un sitio estático siguiendo los formatos de salida, redirecciones, etc. de Vercel.

Puedes cambiar el destino modificando la importación:

```js "serverless" "static"
import vercel from '@astrojs/vercel/serverless';
import vercel from '@astrojs/vercel/static';
```

## Uso

<ReadMore>[Lee la guía completa para despliegue aquí.](/es/guides/deploy/vercel/)</ReadMore>

Puedes desplegar por CLI (`vercel deploy`) o conectando tu nuevo repositorio en el [Panel de Vercel](https://vercel.com/). Alternativamente, puedes crear un build de producción localmente:

```sh
astro build
vercel deploy --prebuilt
```

## Configuración

Para configurar este adaptador, pasa un objeto a la invocación de función `vercel()` en `astro.config.mjs`:

### `webAnalytics`

**Tipo:** `VercelWebAnalyticsConfig`<br/>
**Disponible para:** Serverless, Static<br/>
<Since v="3.8.0" pkg="@astrojs/vercel" />

Puedes habilitar [Vercel Analytics](https://vercel.com/docs/analytics) (incluyendo Web Vitals y Audiences) configurando `webAnalytics: { enabled: true }`. Esto inyectará los scripts de seguimiento de Vercel en todas tus páginas.

```js title="astro.config.mjs" ins={8-10}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
  }),
});
```

### `imagesConfig`

**Tipo:** `VercelImageConfig`<br/>
**Disponible para:** Serverless, Static
<Since v="3.3.0" pkg="@astrojs/vercel" />

Opciones de configuración para la [API de Optimización de Imágenes de Vercel](https://vercel.com/docs/concepts/image-optimization). Consulta la [documentación de configuración de imágenes de Vercel](https://vercel.com/docs/build-output-api/v3/configuration#images) para obtener una lista completa de los parámetros admitidos.

Las propiedades `domains` y `remotePatterns` se llenarán automáticamente utilizando [la configuración correspondiente de `image` en Astro](/es/reference/configuration-reference/#opciones-de-imagen).

```js title="astro.config.mjs" ins={8-10}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imagesConfig: {
      sizes: [320, 640, 1280],
    },
  }),
});
```

### `imageService`

**Tipo:** `boolean`<br/>
**Disponible para:** Serverless y Static
<Since v="3.3.0" pkg="@astrojs/vercel" />

Cuando está habilitado, se configurará y utilizará automáticamente un [Servicio de Imágenes](/es/reference/image-service-reference/) impulsado por la API de Optimización de Imágenes de Vercel en producción. En desarrollo, el servicio de imágenes especificado por [`devImageService`](#devimageservice) se utilizará en su lugar.

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/static';

export default defineConfig({
  // ...
  output: 'static',
  adapter: vercel({
    imageService: true,
  }),
});
```

```astro
---
import { Image } from 'astro:assets';
import astroLogo from ''../assets/logo.png';
---
<!-- Este componente -->
<Image src={astroLogo} alt="My super logo!" />
<!-- se convertirá en el siguiente elemento de HTML -->
<img
  src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
  alt="Mi super logo!"
  loading="lazy"
  decoding="async"
  width="..."
  height="..."
/>
```

### `devImageService`

**Tipo:** `'sharp' | 'squoosh' | string`<br/>
**Disponible para:** Serverless, Static
<Since v="3.8.0" pkg="@astrojs/vercel" />
**Por defecto**: `sharp`

Te permite configurar qué servicio de imágenes usar en desarrollo cuando [imageService](#imageservice) está habilitado. Esto puede ser útil si no puedes instalar las dependencias de Sharp en tu máquina de desarrollo, pero usar otro servicio de imágenes como Squoosh te permitiría previsualizar imágenes en tu entorno de desarrollo. La compilación no se ve afectada y siempre usará la Optimización de Imágenes de Vercel.

También puede establecerse en cualquier valor arbitrario para usar un servicio de imágenes personalizado en lugar de los integrados en Astro.

```js title="astro.config.mjs" ins={8-9}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    imageService: true,
    devImageService: 'squoosh',
  }),
});
```

### `isr`

**Tipo:** <code>boolean |   VercelISRConfig</code><br/>
**Disponible para:** Serverless
<Since v="7.2.0" pkg="@astrojs/vercel" />
**Por defecto**: `false`

Permite desplegar tu proyecto como una función de [ISR (Regeneración Estática Incremental)](https://vercel.com/docs/incremental-static-regeneration), que almacena en caché tus páginas renderizadas bajo demanda de la misma manera que las páginas prerenderizadas después de la primera solicitud.

Para habilitar esta característica, establece `isr` en `true` en la configuración del adaptador de Vercel en `astro.config.mjs`:

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    isr: true,
  }),
});
```

Toma en cuenta que las solicitudes de funciones ISR no incluyen parámetros de búsqueda, similar a las [solicitudes](/es/reference/api-reference/#astrorequest) en modo estático.

#### Invalidación de caché de ISR

Por defecto, una función ISR se almacena en caché durante la duración de tu despliegue. Puedes controlar aún más el almacenamiento en caché configurando un tiempo de expiración, o excluyendo rutas particulares del almacenamiento en caché por completo.

##### Invalidación basada en el tiempo

Puedes cambiar la duración del tiempo para almacenar en caché rutas configurando un valor de `expiration` en segundos:

```js title="astro.config.mjs" {8-11}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    isr: {
      // almacena todas las páginas en la primera solicitud y las guarda por 1 día
      expiration: 60 * 60 * 24,
    },
  }),
});
```

##### Excluir rutas del almacenamiento en caché

Para implementar el [modo borrador](https://vercel.com/docs/build-output-api/v3/features#draft-mode) de Vercel, o [Regeneración Estática Incremental bajo demanda (ISR)](https://vercel.com/docs/build-output-api/v3/features#on-demand-incremental-static-regeneration-isr), puedes crear un token de bypass y proporcionarlo a la configuración `isr` junto con cualquier ruta para excluir del almacenamiento en caché:

```js title="astro.config.mjs" {7-12}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
    output: "server",
    adapter: vercel({
        isr: {
            // Un string aleatoria secreta que creas.
            bypassToken: "005556d774a8",
            // Rutas que siempre se servirán frescas.
            exclude: [ "/api/invalidate", "/posts/[...slug]" ]
        }
    })
})
```

### `includeFiles`

**Tipo:** `string[]`<br/>
**Disponible para:** Serverless

Usa esta propiedad para forzar a que los archivos se incluyan en el empaquetado de tu función. Esto es útil cuando notas que faltan archivos.

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    includeFiles: ['./my-data.json'],
  }),
});
```

### `excludeFiles`

**Tipo:** `string[]`<br/>
**Disponible para:** Serverless

Utiliza esta propiedad para excluir cualquier archivo del proceso de empaquetado que de otra manera se incluiría.

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    excludeFiles: ['./src/some_big_file.jpg'],
  }),
});
```

### `maxDuration`

**Tipo:** `number`<br/>
**Disponible para:** Serverless

Usa esta propiedad para extender o limitar la duración máxima (en segundos) que pueden ejecutarse las funciones sin servidor antes de agotar el tiempo de espera. Consulta la [documentación de Vercel](https://vercel.com/docs/functions/serverless-functions/runtimes#maxduration) para conocer el límite predeterminado y máximo para el plan de tu cuenta.

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
// ...
  output: "server",
  adapter: vercel({
    maxDuration: 60
  }),
});
```

### Configuración de agrupación de funciones

El adaptador de Vercel combina todas tus rutas en una única función por defecto.

También tienes la opción de dividir las compilaciones en una función separada para cada ruta usando la opción `functionPerRoute`. Esto reduce el tamaño de cada función, lo que significa que es menos probable que excedas el límite de tamaño para una función individual. Además, el código se inicia más rápido.

Verifica que tu plan de Vercel incluya un número adecuado de funciones antes de habilitar `functionPerRoute`. Por ejemplo, el nivel gratuito de Vercel limita cada despliegue a no más de 12 funciones. Si tu plan de Vercel es insuficiente para el número de rutas en tu proyecto, recibirás un mensaje de error durante el despliegue.

```js title="astro.config.mjs" ins={8}
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    functionPerRoute: true,
  }),
});
```

### Ejecutar el middleware de Astro en funciones de Vercel Edge

El adaptador `@astrojs/vercel/serverless` puede crear una [función edge](https://vercel.com/docs/functions/edge-functions) a partir de un middleware de Astro en tu base de código. Cuando `edgeMiddleware` está habilitado, una función edge ejecutará tu código de middleware para todas las solicitudes, incluyendo activos estáticos, páginas prerrenderizadas y páginas renderizadas bajo demanda.

Para páginas renderizadas bajo demanda, el objeto `context.locals` se serializa usando JSON y se envía en un encabezado para la función serverless, que realiza la renderización. Como medida de seguridad, la función serverless se negará a servir solicitudes con una respuesta `403 Forbidden` a menos que provengan de la función edge generada.

Esta es una característica opcional. Para habilitarla, establece `edgeMiddleware` en `true`:

```js title="astro.config.mjs" "edgeMiddleware: true"
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  // ...
  output: 'server',
  adapter: vercel({
    edgeMiddleware: true,
  }),
});
```

El middleware edge tiene acceso al [`RequestContext`](https://vercel.com/docs/functions/edge-middleware/middleware-api#requestcontext) de Vercel como `ctx.locals.vercel.edge`. Si estás utilizando TypeScript, puedes obtener tipos adecuados actualizando `src/env.d.ts` para utilizar `EdgeLocals`:

```ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />

type EdgeLocals = import('@astrojs/vercel').EdgeLocals

declare namespace App {
  interface Locals extends EdgeLocals {
    // ...
  }
}
```

### Soporte de versiones de Node.js

El adaptador `@astrojs/vercel` admite versiones específicas de Node.js para desplegar tu proyecto de Astro en Vercel. Para ver las versiones de Node.js admitidas en Vercel, haz clic en la pestaña de configuración de un proyecto y desplázate hacia abajo hasta la sección "Versión de Node.js".

Consulta la [documentación de Vercel](https://vercel.com/docs/functions/serverless-functions/runtimes/node-js#default-and-available-versions) para obtener más información.


[astro-integration]: /es/guides/integrations-guide/
